<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2 v-if="flag">Essential Links 0 </h2>
    <h2 v-if="!flag">Essential Links 2 </h2>
    <ul>
      <li v-for="(item,index) in datalist" >
        <a v-bind:href="item.name" target="_blank" v-text="(item.name)+'='+(index+10)">Core Docs</a>
      </li>
    </ul>
    <button v-on:click="testclick">大妮妮</button>  
    <button v-bind:class="'class01'" v-on:click="testclick2(8)">大妮妮8</button>  
    <!--   如果是字符的话得 单引号 ！！  -->

<h1>
  <a v-bind:href="'#/newPage?id='+appId">newPage</a>
  <router-link :to="'newPage'">newPage2</router-link>
  <router-link :to="{path:'/newPage',query:{ id:appId } }" >newPage3</router-link>
</h1>

<br/>

<label>多选：
<input  style="font-size:20px;" type="checkbox" v-model="isMulti" />
</label>
<MultipleSelectionBtns :btns="btns" :isMulti="isMulti" v-on:onSelectLis="onBtnSelect"></MultipleSelectionBtns>


  <Table :clumns="clumns" :datas="datas" :fileds="fileds">
    <template slot="sex" slot-scope="item">
      <span v-if="( item.val !='' ) && ( item.val==0 )">男</span>
      <span v-if="( item.val==1 )">女</span>
      <span v-if="( item.val=='' )">无</span>
    </template>
    <template slot="num" slot-scope="item">
      <a href="###" style="color:blue;">{{item.val}}</a>
    </template>
     <template slot="options" slot-scope="item"><!-- scope 单用会有警告 -->
      <td>
        <a v-bind:href="'user/detail.do?id='+(item.data.id)">查看</a>
        <a v-bind:href="'user/delete.do?id='+(item.data.id)">删除</a>
        <a v-if="item.data.id==3" v-bind:href="'user/disable.do?id='+(item.data.id)">禁用</a>
      </td>
     </template>   

      <p slot="text"> slot 的作用 </p>
      <p slot="sex">男</p>

  </Table>


  </div>


</template>

<!-- v:bind 绑定属性 v-for  v-if  '' 是字符 没有的是计算  -->

<script>

import MultipleSelectionBtns from '@/components/MultipleSelectionBtns'
import Table from '@/components/Table'

export default {
  name: "HelloWorld",
  components:{
    MultipleSelectionBtns,
    Table
  },
  data() {
    return {
      msg: "fu to Your Vue.js App",
      flag:false,
      appId:10000,
      datalist:[
        {name:'还无敌'},
        {name:'康熙帽子'}
      ],
      btns:[
        {text:'选项一',val:0,isActive:false},
        {text:'选项二',val:1,isActive:false},
        {text:'选项三',val:2,isActive:false},
        {text:'选项四',val:3,isActive:false}
      ],
      isMulti:false,
      clumns:[
        {text:'列一',clumn:'id'},
        {text:'列二',clumn:'name'},
        {text:'列三',clumn:'num'},
        {text:'列四',clumn:'sex'},
        {text:'列五',clumn:'address'}
      ],
      fileds:{
        id:'ID',
        num:'编号',
        name:'名称',
        sex:'性别',
        address:'地址'
      },
      datas:[
        {id:'1',name:'',num:'',sex:'1',address:'故宫'},
        {id:'2',name:'2',num:'',sex:'0',address:''},
        {id:'3',name:'',num:'3',sex:'',address:'中南海'},
        {id:'4',name:'',num:'0000',sex:'1',address:''},
        {id:'5',name:'jim',num:'1111',sex:'1',address:'钓鱼台'},
        {id:'6',name:'tom',num:'',sex:'0',address:''}
      ]
    };
  },
  mounted(){
    console.log("触发");
    //  let id = this.$route.params.id
    //  console.log(id);
  },
  methods:{
      testclick(){
        alert(0)
      },
      testclick2(i){
        alert(i)

        // console.log(MultipleSelectionBtns.data);

      },
      test22:function(){
        console.log("以上都是一样的方法定义");
      },
      onBtnSelect(data){
        console.log(JSON.stringify(data));

        const arr = [1,2,3,4,5,6,7,8,9,0];
        let i  = Math.max(...arr);
        //  3个点运算符  spread 运算符  , 目的是将一个数组 转换成 以逗号分割的参数序列  
        console.log("max i = "+i );

      }
  }

};

const api = {
  testUrl:'sys/testUrl',
  testUrl2:'sys/testUrl2'
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--  如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素。 -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.class01 {
  color: red;
}
</style>
